<!--
 * @Descripttion:
 * @version:
 * @Author: sueRimn
 * @Date: 2020-11-06 16:06:21
 * @LastEditors: sueRimn
 * @LastEditTime: 2020-11-13 11:50:28
-->
<template>
  <div class="app-container">
    <div class="search">
      <div class="search_left">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="机构名称">
            <el-input v-model="name" placeholder="教师姓名" />
          </el-form-item>
          <el-form-item label="省">
            <el-select v-model="provinec_id" filterable placeholder="请选择省份">
              <el-option
                v-for="item in provinceData"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="市">
            <el-select v-model="city_id" filterable placeholder="请选择市区">
              <el-option
                v-for="item in cityData"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div class="search_right">
        <el-button type="primary" @click="searchList">查询</el-button>
        <el-button type="info" @click="ResetList">重置</el-button>
      </div>
    </div>
    <div class="staffTable">
      <!-- <el-button type="primary" class="addStaff" @click="toAddStaff">新增员工</el-button> -->
      <el-table
        :data="tableData"
        border
        class="table"
      >
        <el-table-column
          width="50"
          label="序号"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.$index + 1 + pageSize*(currentPage - 1 ) }}
          </template>
        </el-table-column>
        <el-table-column
          label="地区"
          width="200"
        >
          <template slot-scope="scope">
            {{ request(scope.row) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="user_name"
          label="机构名称"
          width="200"
        />
        <el-table-column
          prop="phone"
          label="联系电话"
          width="200"
        />
        <el-table-column
          label="分管区域"
        >
          <template slot-scope="scope">
            <span v-for="(item,index) in scope.row.mechanism_region" :key="index">{{ index != 0 ? '，':'' }}{{ item.mechanism_region_name }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="levle_name"
          label="角色"
          width="150"
        />
        <el-table-column
          fixed="right"
          label="操作"
          width="150"
          align="center"
        >
          <template slot-scope="scope">
            <el-button size="small" type="primary" @click="editPermission(scope.row)">编辑权限</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="bottomPagination">
      <el-pagination
        :page-sizes="[10,30,50]"
        :page-size="pageSize"
        :current-page="currentPage"
        layout=" sizes, prev, pager, next,total, jumper"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </div>
    <PerPop ref="PerPop" :dialog-visible="PerPopDialogVisible" :teacher-id="teacherId" @closeFireStaff="closeFireStaff" />
  </div>
</template>

<script>
import { get_InstitutionsList } from '@/api/personnelManagement'
import { formatDate } from '@/utils/getTime'
import PerPop from './components/permissionPop'
import provinceData from '@/assets/js/level_linkage/province'
import cityData from '@/assets/js/level_linkage/city'
import areaData_ary from '@/assets/js/level_linkage/area'
export default {
    name: 'InstitutionsList',
    filters: {
        get_YMDHMS: function(value) {
            if (!value) return ''
            value = formatDate(value)
            return value
        }
    },
    components: {
        PerPop
    },
    data() {
        return {
            total: 0, // 总数
            pageSize: 10, // 每页条数
            currentPage: 1, // 页数
            name: '',
            provinec_id: null,
            city_id: null,
            tableData: [],
            // 地区数据
            provinceData,
            cityData: [],
            PerPopDialogVisible: false, // 权限弹窗
            teacherId: null // 编辑权限账号id
        }
    },
    watch: {
        provinec_id(item) {
            this.cityInitData(item)
        }
    },
    created() {
    // 生命周期钩子：组件实例创建完成，属性已绑定，但 DOM 还未生成，el 属性还不存在
    // 初始化渲染页面
        this.getPeopleList()
    },
    methods: {
        async getPeopleList() {
            var queryData = {
                page: this.currentPage,
                pagesize: this.pageSize,
                type: 2
            }
            console.log('查询条件：', '机构名称：', this.name, '省份：', this.provinec_id, '市区：', this.city_id)
            if (this.name != '') {
                queryData.user_name = this.name
                console.log('查询名字')
            }

            if (this.provinec_id) {
                queryData.provinec_id = this.provinec_id
                console.log('查询省份')
            }

            if (this.city_id) {
                queryData.city_id = this.city_id
                console.log('查询市区')
            }

            var resData = await get_InstitutionsList(queryData)
            console.log('获取机构列表：', resData)
            if (resData.code == 200) {
                this.total = resData.data.total
                this.tableData = resData.data.data
            } else {
                this.total = 0
                this.tableData = []
            }
        },
        searchList() {
            this.currentPage = 1
            this.getPeopleList()
        },
        ResetList() {
            this.name = ''
            this.provinec_id = null
            this.city_id = null
            this.currentPage = 1
            this.getPeopleList()
        },
        handleCurrentChange(val) {
            this.currentPage = val
            this.getPeopleList()
        },
        handleSizeChange(val) {
            this.currentPage = 1
            this.pageSize = val
            this.getPeopleList()
        },
        toAddStaff() {
            // this.$router.push({ path: '/personnelManagement/addStaff' })
        },
        // 根据省拿到市
        cityInitData(item) {
            var city_ary = []
            for (var i in cityData) {
                for (var k in cityData[i]) {
                    if (cityData[i][k].value.substring(0, 2).indexOf(item) > -1) {
                        city_ary.push(cityData[i][k])
                    }
                }
            }
            this.cityData = city_ary
        },
        request(res) {
            // 查询省份
            var label = ''
            for (let _code in provinceData) {
                if (Number(provinceData[_code].value) === Number(res.provinec_id)) {
                    label = provinceData[_code].label
                }
            }
            // 查询 城市
            var city_label = ''
            for (let i in cityData) {
                for (let k in cityData[i]) {
                    if (Number(cityData[i][k].value) === Number(res.city_id)) {
                        city_label = cityData[i][k].label
                    }
                }
            }
            // 查询 区域/县
            var area_label = ''
            for (let i in areaData_ary) {
                for (let k in areaData_ary[i]) {
                    for (let j in areaData_ary[i][k]) {
                        if (Number(areaData_ary[i][k][j].value) === Number(res.area_id)) {
                            area_label = areaData_ary[i][k][j].label
                        }
                    }
                }
            }
            return label + ' ' + city_label + ' ' + area_label
        },
        // 编辑权限
        editPermission(row) {
            console.log(row)
            this.$refs.PerPop.checkAuth()
            this.PerPopDialogVisible = true
            this.teacherId = row.id
        },
        closeFireStaff() {
            this.PerPopDialogVisible = false
        }

    }
}
</script>

<style lang="scss" scoped>
.search{
    display: flex;
    justify-content:space-between;
    align-items: center;
    width: 100%;
    .search_left{
         display: flex;
         align-items: center;
          .el-form-item{
           margin-bottom: 0 !important;
      }
    }
     .search_right{
    }
    }
    .staffTable{
        .addStaff{
            margin-top: 20px;
            margin-right: 52px;
        }
      .table{
          width: 100%;
          margin-top:10px
      }
    }
    .bottomPagination {
    padding: 15px 0;
}
</style>
